<?php
    require_once 'include_dao.php';
    ini_set("display_errors", $DISPLAY_ERROR);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="./resources/css/frontend.css" media="screen" />
        <script type="text/javascript" src="./resources/js/jquery-1.6.2.js"></script>
        <script type="text/javascript" src="./resources/js/jquery.jcarousel.js"></script>
        <link rel="stylesheet" type="text/css" href="./resources/css/tango/skin.css" />
        
        

        <!-- load Galleria -->
        <script src="./resources/galleria/galleria-1.2.7.min.js"></script>

        <style type="text/css">


            
            body{
            margin:0px;
            padding: 0px;


            }
            .capaPrincipal2{
                padding:0;
                font-size:12px;
                margin:0;
                }
            .capaprincipal{
                padding:0;
                font-size:12px;
                margin:0;
                
                }

            .capa{
                margin: 0px;
                padding: 0px;
                height: 340px;
                width: 880px;
            }
            .capafondo{
	margin: 0px;
	padding: 0px;
	height: 380px;
	width: 880px;
	background: url(resources/img/Ligth-Box-Fotos.png);
            }
			
	   .capaEspacio{
	margin: 0px;
	padding: 0px;
	height: 325px;
            }
	
            .capaplay
            {
                margin: 0px;
                padding: 5px;
                width: 50px;
                height: 30px;
            }

            #conten_div {
                height: 340px;
            }

            .desplazador{width: 880px;
                        height: 156px;
                        background: url(resources/img/slayer.png);

            }
#galleria{
	height:380px
}
            #menu{height: 35px; color:#437B27; font-size: 14px; font-weight: bold}
            #menu a {text-decoration: none; color:#437B27; font-size: 14px; font-weight: bold}
            #menu a.hover {color:#437B27; font-size: 14px; font-weight: bold}

            #navi {
                    list-style:none;
                    margin:0;
                    padding:0;
                }

            #navi li {
                margin:6px;
                padding:0;
                float:left;
                padding: 20px;
            }

            #navi li img {
                display:block;
                width:80px;
                text-decoration:none;
                text-align:center;
                font-size:11px;
                color:#FFFFFF;

            }

            #navi li a:hover {
                color:#99CC00;
            }
            #navi2 {
                    list-style:none;
                    margin:0;
                    padding:0;
                }

            #navi2 li {
                margin:0px;
                padding:0;
                float:right;
                display:block;
                text-decoration:none;
                text-align:center;
                font-size:14px;

            }

            #navi2 li div {
                display:block;
                text-decoration:none;
                text-align:center;
                font-size:14px;
            }

            #navi2 li a:hover {
                color:#99CC00;
            }

            .titulocolor{
                background-color: #F0F0EE;
            }
            .tituloalbums
            {
                font-weight: bold;
                font-size: 22px;
                padding: 4px;
            }
            
        </style>
<?php
       $resul_albun = DAOFactory::getAlbumDAO()->LoadAlbunes();
?>
        <script type="text/javascript" >
            arrayfoto = new Array();
            contador = 0;
            parar = 0;

             function is_chrome()
             {
                var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
               // alert(is_chrome);
             }
            <?php
                for($idal = 0;$idal<count($resul_albun);$idal++)
                {
                    $resultado_fotos = DAOFactory::getFotoDAO()->queryByIdAlbun($resul_albun[$idal]->albumid);
                    echo "var fotoalbum".$resul_albun[$idal]->albumid." = new Array(";
                    $todos="";
                    for($foto = 0; $foto<count($resultado_fotos); $foto++)
                    {
                        $todos = $todos."'".substr($resultado_fotos[$foto]->imagen,3)."',";
                    }
                    $todos = substr($todos, 0,strlen($todos)-1);
                    echo $todos.");";
                }
            ?>
        $(document).ready(function(){

            <?php
                for($idal = 0;$idal<count($resul_albun);$idal++)
                {
                    $resultado_fotos = DAOFactory::getFotoDAO()->queryByIdAlbun($resul_albun[$idal]->albumid);
                    
                    echo '$("#imapub'.$resul_albun[$idal]->albumid.'").click(function(){
                        var strimg = "url("+ $("#imapub'.$resul_albun[$idal]->albumid.'").attr("src") +")";
                        $("div.capaprincipal").css("background-image", strimg);
                        $("div.capaprincipal").css("background-repeat", "no-repeat");
                        $("div.capaprincipal").css("width", "865px");
                        $("#ImgPlay").css("visibility","visible");
                        arrayfoto = fotoalbum'.$resul_albun[$idal]->albumid.';
                        contador=0;
                        Recorrido();
                        });';
                                       
                }
            ?>
                jQuery('#mycarousel').jcarousel({
                    wrap: 'circular',
                    visible: 6
                 });

                 $("#ImgPlay").click(function(){
                     $("#ImgPlay").css("visibility","hidden");
                 });
                 $("#ImgStop").click(function(){
                     $("#ImgPlay").css("visibility","visible");
                 });
        });
    </script>
    </head>
    <body>
        <div class="capaPrincipal2">
            <div class="capa">
                <div>
                </div>
                <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td colspan="2" class="titulocolor"> 
                            <div class="tituloalbums">
                                <?php 
                                    if($_SESSION['_IDIOMA']==$IDIOMA_ESP)
                                        echo "Fotos The Pub";
                                    else
                                        echo "Photos The Pub";
                                ?>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" >
                        <iframe name="galleria" id="galleria" height="380px" width="100%"  frameborder="0" src="galleria.php" >
                            
                        </iframe>
    
                      </td>
                        
                    </tr>
                </table>
               
                <div class="desplazador">
                        <br>
                        <ul class="jcarousel-skin-tango" id="mycarousel">
                           <?php
                               imagenes($resul_albun);
                            ?>
                        </ul>
                    </div>
                </div>
             
            
        </div>
        <script type="text/javascript" >
            function Recorrido()
            {
                strimg = arrayfoto[contador];
                $("div.capaprincipal").css({
                    "background-image":"url("+strimg+")",
                     "background-repeat":"no-repeat",
                     "width":"485px","height":"365px"});
                 if(parar==0)
                 {
                    contador++;
                    contador = contador % arrayfoto.length;
                    setTimeout("Recorrido()",4000);
                 }
            }
            
            function stop()
            {
                parar=1;
            }
        </script>
    </body>
</html>

<?php
function imagenes($resul_albun)
{
   for($i=0;$i<count($resul_albun);$i++){
         echo "<li><a href='galleria.php?albumId=".$resul_albun[$i]->albumid."' target='galleria'>".$resul_albun[$i]->des_esp."<img width='100' src=". substr($resul_albun[$i]->imagen,3) ." alt='".$resul_albun[$i]->des_esp."' id='imapub".$resul_albun[$i]->albumid."'></a></li>";
     }
}
?>